<template>
	<div class="system-dic-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-tabs v-model="state.activeName" @tab-change="selectChange">
				<el-tab-pane label="系统配置" name="sys">
					<el-form label-width="200px">
						<el-form-item :label="item.title" v-for="(item,index) in state.tableData.data" :key="'sys' + index">
							<el-input v-model="item.value" style="width: 50%;" v-if="item.type == 'text'"/>
							<el-input-number :min="0" v-model="item.value" :controls="false" style="width: 50%;"  v-if="item.type == 'number'"/>
							<el-select v-model="item.value" style="width: 50%" v-if="item.type == 'select'">
								<el-option :label="it" :value="val" v-for="(it,val) in item.type_value" :key="'hejianselct'+val"></el-option>
							</el-select>
							<el-upload
								style="line-height: 1;"
								v-if="item.type == 'image'"
								:show-file-list="false"
								:auto-upload="false"
								accept= "image/jpeg, image/png, image/jpg"
								:on-change="file => onChange(file, index)">
								<img v-if="item.value" :src="state.VITE_IMG_URL + item.value" class="my-imgage" />
								<div v-else class="my-upload-avatar">
									<SvgIcon name="ele-Plus" :size="20"/>
								</div>
							</el-upload>

							<el-upload
								style="line-height: 1;"
								v-if="item.type == 'image-tailor'"
								:show-file-list="false"
								:auto-upload="false"
								accept= "image/jpeg, image/png, image/jpg"
								:on-change="file => onChangeTailor(file, index)">
								<img v-if="item.value" :src="state.VITE_IMG_URL + item.value" class="my-avatar" />
								<div v-else class="my-upload-avatar">
									<SvgIcon name="ele-Plus" :size="20"/>
								</div>
							</el-upload>

							<el-switch v-model="item.value" active-value="1" inactive-value="0" inline-prompt v-if="item.type == 'switch'"></el-switch>
							<span style="font-size: 14px;color: #999;width: 100%;line-height: 30px;">{{ item.remark }}</span>
						</el-form-item>
						<el-form-item>
							<el-button @click="commetForm" type="primary" :loading="state.tableData.buttomLoading">保存配置</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="脚本配置" name="jiaoben">
					<el-form label-width="120px">
						<el-form-item label="插件开关">
							<el-switch v-model="state.jiaobenData.sichuan.open" :loading="state.jiaobenData.sichuan.loading" :active-value="1" :inactive-value="0" inline-prompt size="default" :before-change="sichuanBeforeChange"></el-switch>
						</el-form-item>
					</el-form>
				</el-tab-pane>
			</el-tabs>
			<CropperDialog ref="cropperDialogRef" @refresh_img="refresh_img"/>
		</el-card>
	</div>
</template>

<script setup name="queue">
import { computed , reactive, onMounted, ref,defineAsyncComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { systemWebApi } from '/@/api/system/web/index';
import { commApi } from '/@/api/comm/index';
// 引入组件
const CropperDialog = defineAsyncComponent(() => import('./cropper.vue'));
// 定义变量内容
const cropperDialogRef = ref();
const state = reactive({
	VITE_IMG_URL:import.meta.env.VITE_IMG_URL,
	activeName:'sys',
	tableData: {
		data: [],
		loading: false,
		buttomLoading: false,
	},
	cropperIndex:0,
	jiaobenData:{
		notik:{
			open:0,
			loading:false
		},
		sichuan:{
			open:0,
			loading:false
		}
	}
});
// select初始化数据
const selectChange = (e) => {
	if(e == 'jiaoben'){
		systemWebApi().tool().then(res=>{
			if(res.data){
				state.jiaobenData.sichuan.open = 1
			}else{
				state.jiaobenData.sichuan.open = 0
			}
		})
	}else{
		getTableData()
	}
	state.tableData.data = [];
}

//sichuan脚本验证
const sichuanBeforeChange = async(e) =>{
	let nome = '1'
	state.jiaobenData.sichuan.loading = true
	try {
		await systemWebApi().tool({nome})
		state.jiaobenData.sichuan.loading = false
		return true
	} catch (error) {
		return false
	}
}

// 初始化表格数据
const getTableData = () => {
	state.tableData.loading = true;
	systemWebApi().index({type:state.activeName}).then(res=>{
		state.tableData.data = res.data;
        state.tableData.loading = false;
	})
	
};
// 修改
const commetForm = () => {
	state.tableData.buttomLoading = true;
	let data = {}
	state.tableData.data.forEach((item,index)=>{
		data[item.cname] = item.value
	})
	systemWebApi().conf(data).then(res=>{
		state.tableData.buttomLoading = false;
		ElMessage.success('修改成功');
	})
};

const refresh_img = (url) => {
	state.tableData.data[state.cropperIndex].value = url;
}
/**
 * 文件选择改变时触发
 */
const onChange = (file, index) => {
	state.cropperIndex = index;
	if (file.status !== "ready") return;
	const formData = new FormData();
	formData.append('file', file.raw);
	commApi().upload(formData).then(res=>{
		state.tableData.data[state.cropperIndex].value = res.data;
	})
}

const onChangeTailor = (file, index) => {
	state.cropperIndex = index;
	if (file.status !== "ready") return;
	onCropperDialogOpen(file.raw)
}

// 打开裁剪弹窗
const onCropperDialogOpen = (file) => {
	cropperDialogRef.value.openDialog(file);
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>
<style lang="scss" scoped>
:deep(.el-input-number .el-input__inner) {
	text-align: left;
}
</style>